<template>  
    <div>
      {{message}}
    </div>
    <div>obj:{{obj}}</div>
    <div>{{shallowReactiveMessage}}</div>
    
    <button @click="change1">1</button> 
    <button @click="change12">2</button>
    
    </template>
    
    
    
    <script setup lang="ts">
    
    import { reactive ,readonly,shallowReactive} from 'vue';
    let message = reactive<number[]>([])  // [] {}
    let obj = reactive({
      name:'tangshao'
    })
    
    obj.name = 'objmessage'
    
    setTimeout(()=>{
      let arr = [1,2,3,1]
      // message = arr  这种不能改
      message.push(...arr) 
      console.log(message)
    },1000)
    
    
    let persion = reactive({
      count:1
    })
    
    persion.count++
    let copy = readonly(persion)
    // copy.count++
    
    
    let shallowReactiveMessage = shallowReactive({
      test:'我是大哥',
      nav:{
        bav:{
          name:'我是谁'
        }
      }
    })
    
    const change1 = ()=>{
      shallowReactiveMessage.test = 'test被改了'
    }
    
    const change12 = ()=>{
      shallowReactiveMessage.nav.bav.name = '改不了'
    }
    
    
    // change1()
    // change12() 这里调用两层次都会被改，但是如果在button调用就不会
    
    </script>
    
    
    <style>
    
    
    </style>